import React from 'react'
import { observer } from 'mobx-react-lite'
// import {autorun,reaction} from 'mobx'
import {reaction} from 'mobx'

// import counterStore from './store/counterStore'
import useStore from '../store/RootStore'


export default observer(function Home() {
  const {counterStore,numberStore}=useStore()
  React.useEffect(()=>{
    // autorun创建就执行，reaction是变化在执行，reaction有两个回调函数参数，第一个返回监听的变量，第二个执行代码
    // autorun(()=>{
    //   console.log('count改变了'+counterStore.count);
    // })
    reaction(
      () => counterStore.count,
      () => {
        console.log('count改变了'+counterStore.count);
      }
    )
  },[])//eslint-disable-line
  return (
    <div>
      <h1>{counterStore.count}</h1>
      <h1>count的计算属性{counterStore.countComputed}</h1>
      <button onClick={counterStore.actionCount}>+1</button>
      <h2>{numberStore.number}</h2>
      <button onClick={()=>numberStore.changeNum(10)}>改变number值</button>
      <button onClick={numberStore.changeAsync}>异步改变number值</button>
    </div>
  )
})

